<template>
  <!-- 页面底部打开APP -->
  <div class="page-bottom-open-app" @click="$emit('click')">
    <div class="flex">
      <img class="logo-icon" src="../assets/images/icon-logo.png" />
      <div class="open-tips">
        <p>创意灵感聚集地</p>
      </div>
    </div>
    <div class="right">
      <div
        class="open-btn"
        v-app-jump="{
          to: openUrl,
          params: { ymscheme: ymParmas },
        }"
        id="open-box-youmeng"
        youmeng="youmeng"
      >
        立即打开
      </div>
      <div class="user-info">
        <img :src="$userInfo.avatar" v-if="$userInfo.avatar" />
        <div class="login-btn" @click="login" v-else>登录</div>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';
  import mixins from 'mixins';

  export default {
    mixins: [mixins],
    props: {
      ymParmas: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        // 环境
        env: process.env.NODE_ENV,
      };
    },
    computed: {
      openUrl() {
        return `mtjimu://webview?url=${encodeURIComponent(window.location.href)}`;
      },
      ...mapGetters(['$userInfo']),
    },
    watch: {},
    mounted() {},
    methods: {
      openApp() {
        window.location.href = 'https://ul.movtile.com/wxjump.html';
      },
    },
  };
</script>

<style lang="less" scoped>
  .page-bottom-open-app {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0rem;
    width: 100%;
    height: 6.5rem;
    background: #000000;
    display: flex;
    align-items: center;
    font-size: 1.7rem;
    font-weight: 400;
    color: #ffffff;
    overflow: hidden;
    padding: 0 1rem;

    .logo-icon {
      flex: none;
      width: 4rem;
      height: 4rem;
      margin: auto 1rem auto 0;
    }
    .flex {
      align-items: center;
      height: 4.1rem;
    }
    .open-btn {
      background: #2247ff;
      font-size: 1.4rem;
      line-height: 2.8rem;
      font-weight: 500;
      color: #ffffff;
      width: 7.6rem;
      height: 2.8rem;
      line-height: 2;
      text-align: center;
      border-radius: 0.3rem;
    }
  }

  .right {
    display: flex;
    align-items: center;
    margin-left: auto;
  }

  .user-info {
    margin-left: 1rem;
    img {
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
      overflow: hidden;
    }

    .login-btn {
      background-color: #eee;
      font-size: 1.2rem;
      width: 32px;
      height: 32px;
      line-height: 32px;
      border-radius: 50%;
      text-align: center;
    }
  }
</style>
